import React from 'react';
import {Alert, Icon, Popconfirm, Card, Button, Table, Form, Select, Modal, Divider} from 'antd'
import axios from '../../components/Engineering/axios'
import Utils from '../../components/Engineering/utils'
import ApiTubro from '../../components/Engineering/ApiTubro'
import SearchControl from '../../components/Engineering/SearchControl'
import QuickTool from '../../components/Engineering/QuickTool'


const FormItem = Form.Item;
const Option = Select.Option;
export default class Order extends React.Component {
  expand = false
  searchFieldList = [
    {type: 'INPUT', label: '海关编护', field: 'hsCode', placeholder: '请输入编码',},
    {type: 'INPUT', label: '海关维护', field: 'hsCsdsdode', placeholder: '请输入编码',},
    {type: 'INPUT', label: '海关编护', field: 'hsCode', placeholder: '请输入编码',},
    {type: 'INPUT', label: '海关维护', field: 'hsCsdsdode', placeholder: '请输入编码',},]
  columns = [
    {title: '订单编号', dataIndex: 'order_sn'},
    {title: '车辆编号', dataIndex: 'bike_sn'},
    {title: '用户名', dataIndex: 'user_name', render: QuickTool.ropover("user_name")},
    {title: QuickTool.tooltip({title: "手机号", help: "这里是输入的文字"}), dataIndex: 'mobile'},
    {title: '里程', dataIndex: 'distance', render: distance => distance / 1000 + 'Km',},
    {title: '行驶时长', dataIndex: 'total_time'},
    {
      title: '徽章',
      dataIndex: 'status3',
      render: QuickTool.badge({
        "0": {text: "待支付", status: "processing"},
        "1": {text: "已支付", status: "success"},
        "2": {text: "已取消", status: "error"},
        "3": {text: "已取消", status: "error"}
      })
    },
    {title: '开始时间', dataIndex: 'start_time', render: QuickTool.moment()},
    {title: '结束时间', dataIndex: 'end_time', render: QuickTool.moment()},
    {title: '订单金额', dataIndex: 'total_fee'},
    {title: '实付金额', dataIndex: 'user_pay'},
    {
      title: '操作', dataIndex: 'caozuo', render: (text, record, index) => {
        return <div>
          <a onClick={() => this.openOrderMapPage(record.id)}><Icon type="edit"
                                                                    style={{marginRight: 2}}/>查看</a>
          <Divider type="vertical"/>

          <a onClick={this.handleLineDelete}><Icon type="delete" style={{marginRight: 2}}/>结束订单</a>
          {/* <Divider type="vertical"/> */}
          {/*<a onClick={() => this.handleOperator('detail')}>员工详情</a>*/}
          <Divider type="vertical"/>
          <Popconfirm placement="rightBottom" title="数据删除将不可以恢复,确定删除?"
                      onConfirm={this.handleLineDelete}
                      cancelText="否"
                      okText="是">
            <a href=""><Icon type="delete" style={{marginRight: 2}}/>删除</a>
          </Popconfirm>
        </div>
      }
    }

  ]

  state = {}
  page = {current: 1, total: 10, size: 10}

  componentDidMount() {
    this.getListForPage()
  }


  getListForPage = params => ApiTubro.getListForPage.bind(this)({
    url: `/order/list`,
    params: this.page
  })
  handleLineDelete = params => ApiTubro.handleLineDelete.bind(this)({url: `/order/ebike_info`, data: {id: params}})

  handleMultipleDelect = params => ApiTubro.handleMultipleDelect.bind(this)({
    url: `/order/ebike_info?${params}`,
    data: params
  })
  openOrderMapPage = params => ApiTubro.openOrderMapPage.bind(this)(`/#/common/order/detail/${params}`)
  handleFinishOrder = params => ApiTubro.handleFinishOrder.bind(this)(`/order/finish_order`)

  render() {

    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 19}
    }


    return (
      <div>
        <Card style={{marginTop: 10}}>
          <SearchControl searchFieldList={this.searchFieldList} {...ApiTubro.mapping(this)}/>

          <div style={{marginBottom: 10}}>
            <Button style={{marginRight: 20}} type="primary" icon="plus">新建 </Button>

            {this.state.selectedRows && this.state.selectedRows.length > 0 ?
              <Button
                type="primary"
                onClick={this.handleMultipleDelect}
                disabled={!this.state.selectedRows}
                loading={this.state.loading}
                icon="delete"
              >
                批量删除
              </Button>
              :
              ''
            }
          </div>
          {this.state.selectedRows ? (
            <Alert
              message={`已选择 ${this.state.selectedRows &&
              this.state.selectedRows.length} 项  服务调用次数总计  ${this.state
                .selectedRows.length * 65} 万`}
              type="info"
              showIcon
            />
          ) : (
            <Alert message={`已选择 0 项  服务调用次数总计  0 万`} type="info" showIcon/>
          )}


          <div className="content-wrap">
            <Table
              // bordered
              style={{marginTop: 10}}
              columns={this.columns}
              dataSource={this.state.pageListData}
              pagination={this.state.pagination}
              loading={!this.state.loadingTableisHide}
              rowSelection={{
                type: 'checkbox',
                selectedRowKeys: this.state.selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                  console.log(selectedRowKeys)
                  this.setState({
                    selectedRowKeys,
                    selectedRows,
                  });
                },
                getCheckboxProps: record => ({            //获取复选框属性
                  disabled: record.status === (1 || 2), // Column configuration not to be checked 不检查列配置
                  name: record.name,
                })
              }}

              onRow={(record, index) => {
                return {
                  onDoubleClick: event => {
                    this.handleLineDelete(record.id)
                  },     //双行点击
                  // onClick: event => {},           // 点击行
                  // onContextMenu: event => {},
                  // onMouseEnter: event => {},      // 鼠标移入行
                  // onMouseLeave: event => {},
                  // onClick: () => {
                  //     let selectKey = [index];
                  //     this.setState({
                  //         selectedRowKeys: selectKey,
                  //         selectedItem: record
                  //     })
                  // }
                }
              }}
            />
          </div>
        </Card>

        <Modal
          title="结束订单"
          visible={this.state.defaultModalVisble}
          onCancel={() => {
            this.setState({defaultModalVisble: false,})
          }}
          onOk={this.handleFinishOrder.bind(this)}
          width={600}
        >
          <Form layout="horizontal">
            <FormItem label="车辆编号" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.bike_sn}
            </FormItem>
            <FormItem label="剩余电量" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.battery + '%'}
            </FormItem>
            <FormItem label="行程开始时间" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.start_time}
            </FormItem>
            <FormItem label="当前位置" {...formItemLayout}>
              {this.state.orderInfo && this.state.orderInfo.location}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}
